
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel='stylesheet' href='/css/bootstrap.min.css'>
<link rel="stylesheet" href="/css/animate.css">
<script src="/common/commonJS.js"></script>
<div class="container">
        <div class="col-md-4 col-md-offset-4">


            <!-- Start Sign In Form -->
            <form action="#" class=" fh5co-form animate-box layui-form" data-animate-effect="fadeIn" id="loginForm">
                <h2>Sign In</h2>
                <div class="form-group layui-form-item">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text"  class="form-control" id="username" lay-verify="verifyUsername" name="username" placeholder="Username" autocomplete="off">
                </div>
                <div class="form-group layui-form-item">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password"  class="form-control" id="password" lay-verify="verifyPassword" name="password" placeholder="Password" autocomplete="off">
                </div>
                <div class="form-group layui-form-item">
                    <input class="form-control" id="verifyCode" lay-verify="verifyCode" name="verifyCode"  placeholder="verifyCode" autocomplete="off">
<!--                    <input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>-->
                </div>
                <div class="form-group layui-form-item">
                    <div id="v_container" style="width: 200px;height: 50px;"></div>
                </div>

                <div class="form-group layui-form-item">
                    <p>Not registered? <a href="/register">Sign Up</a></p>
                </div>
                <div class="form-group layui-form-item">
<!--                    <input  lay-filter="submitLogin"  value="Sign In" class="btn btn-primary">-->
                    <button class="layui-btn layui-btn-primary layui-btn-radius" id="submit" lay-submit=""  type="submit" lay-filter="submitLogin" >登录</button>
                </div>
            </form>
            <!-- END Sign In Form -->

        </div>
    </div>
    <div class="row" style="padding-top: 60px; clear: both;">
        <div class="col-md-12 text-center"><p><small></small></p></div>
    </div>
</div>

<script>

    layui.use(['layer', 'form', 'layedit'], function(){
        var verifyCode = new GVerify("v_container");
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit;

        form.verify({

            verifyUsername: function (value) {
                if(!value.toString().trim().length>0){
                    return '用户名不能为空';
                }else{

                }
            },
            verifyPassword: function (value) {
                if(!value.toString().trim().length>0){
                    return '密码不能为空！';
                }else{

                }
            },
            verifyCode: function(value){
                if(value == null){
                    return '验证码不能为空';
                }else if(!verifyCode.validate(value)){
                    return '验证码错误';
                }else{
                    // return 'dsdasdas';
                }
            }

        });

        form.on('submit(submitLogin)', function(data){
            console.log(data.elem);
            console.log(data.form);
            console.log(data.field);

            var userInfo = data.field;
            var url = "http://localhost:8080/";


            $.ajax({
                type:"get",
                data:userInfo,
                url:"/loginAction",
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert("执行失败了!");
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert("textStatus");

                },
                success:function(data){
                    console.log(data);
                    console.log(data.code);
                    //location.href = url;
                    if(!data.success){
                        console.log("失败");
                        layer.msg("用户名或者密码错误");
                    }else{
                        console.log("成功");
                        layer.msg("登陆成功");
                        location.href = url + "index";  // 页面重定向
                    }
                }

            });
            return false;
        });
    });



</script>





</body>
</html>

